<template>
    <div>
        <el-button  type="primary" @click="showDialog">{{btntext==''?$t('common.generate'):btntext}}</el-button>                        
        <el-dialog
          :visible.sync="dialogVisible"
          width="40%"
          :before-close='cleanRepaInfo'
          append-to-body
          >
            <el-form :rules="rules" :model="form" ref="numberValidateForm"  class="demo-ruleForm">
              <el-form-item
              :label="$t('collection.inputRepayAmount')"
              prop="amount"
              >
                <el-input type="number" :placeholder="$t('verify.plsInput')" v-model.number="form.amount" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
              <el-form-item :label="$t('collection.chooswRepayChannels')"               
              prop="channelCode">
                <el-select @change='selectRepay' v-model="form.channelCode" :placeholder="$t('verify.plsChoose')">
                  <el-option v-for='item,index in paymentArr' :label="item.name" :key='index'  :value="item.channelCode"></el-option>
                </el-select>
                </el-form-item>
              </el-form-item>
              <el-form-item>
                <el-button @click="cancal">{{$t('common.cancel')}}</el-button>
                <el-button @click="submint('numberValidateForm')" type="primary">{{$t('common.submit')}}</el-button>
              </el-form-item>
            </el-form>
            
          <!-- <span>这是一段信息</span> -->
          <!-- <span slot="footer" class="dialog-footer"> -->
            <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
            <!-- <el-button type="primary" @click="submint">确 定</el-button> -->
            
          <!-- </span> -->
            <el-dialog  
                :visible.sync="innerVisible"
                append-to-body
            >
                <div v-if="showRepayCodeImg">
                    <div class="title" >{{$t('common.repayBarcode')}} </div>
                    <img id="repayCodeImg" :class="{ qr: form.channelCode == 60 }" :src="repayCodeImg" alt="" />
                    <div>
                      <el-button type="primary" @click="download">{{$t('common.download')}}</el-button>
                    </div>
                </div>
                <div v-if="showRepayCode">
                    <div class="title">{{$t('common.repayCode')}}</div>
                    <div id="repayCode">{{repayCode}}</div>
                    <div>
                      <el-button  type="primary" @click="copy">copy</el-button>
                    </div>
                </div>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
  import JsBarcode from 'jsbarcode';
  export default {
    props:{
        btntext:{
          default:''
        },
        data:{
            type:Object
        },
        orderid:{
            type:String
        }
    },
    data() {
      let validatorAmount = (rule, value, callback)=>{
          if (value > 0) {
            callback();
          } else {
            callback(this.$t('verify.plsInput'));
          }
      };
      return {
          repayCode:'',
        showRepayCodeImg:false,
        dialogVisible: false,
        paymentArr:[],
        repayCodeImg: '',
        innerVisible:false,
        showRepayCode:false,
        form:{
            channelCode:'',
            paymentCompanyCode:'',
            orderId:'',
            amount:'',
            payinType:'REPAY'
        },
        rules:{
            amount:[
                {required:true,message:this.$t('verify.plsInput')},
                {required:true,validator:validatorAmount,trigger: 'blur'},
            ],
            channelCode:[
                {required:true,message:this.$t('verify.plsChoose')},
            ]
        }
      };
    },
    created(){
    },
    methods: {
      showDialog(){
        this.dialogVisible = true;
        this.getMixRepayConfig();
      },
      copy(){
        let input = document.createElement('input');
        input.value = this.repayCode;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy')
        document.body.removeChild(input);
        this.$message.success(this.$tc('common.copySuccess'));
      },
      download() {
          // 通过选择器获取img元素
          var img = document.getElementById('repayCodeImg')
          // 将图片的src属性作为URL地址
          var url = img.src;
          var a = document.createElement('a')
          var event = new MouseEvent('click')
          a.download = name || '下载图片名称'
          a.href = url
          a.dispatchEvent(event) //根据A标签的属性来搞事情
      },
      selectRepay(e){
          for(let i=0;i<this.paymentArr.length;i++){
              if (this.paymentArr[i].channelCode===e){
                  this.form.channelCode = this.paymentArr[i].channelCode;
                  this.form.paymentCompanyCode = this.paymentArr[i].paymentCompanyCode;
                  return
              }
          }
      },
      getMixRepayConfig(){
        this.$api.collection.getMixRepayConfig({appName:this.data.appName}).then((res) => {
            const { status, data, error } = res;
            if (status === '1' && error === '00000000') {
                let arr = [];
                for(let key in data){
                    arr = arr.concat(data[key]);
                };
                this.paymentArr = arr
            }
        });
      },
      cleanRepaInfo(){
        this.$refs.numberValidateForm.resetFields()
        this.dialogVisible = false;      
      },
      cancal(){
        this.$refs.numberValidateForm.resetFields()
        this.dialogVisible = false;      
      },
      createMixRepayCharge(params){
        this.$api.collection.createMixRepayCharge(params).then((res) => {
            const { status, data, error } = res;
            if (status === '1' && error === '00000000') {
                let repayInfo = null;
                this.repayCode = data;
                this.showRepayCodeImg = false;
                this.showRepayCode = true
                if(this.form.channelCode==10){
                    //当时7-11 时 有条形码
                    this.showRepayCodeImg = true;
                    if (data.indexOf(',') > -1) {
                      repayInfo = data.split(',');
                      this.repayCode = repayInfo[1];
                      this.$nextTick(() => {
                          JsBarcode('#repayCodeImg', repayInfo ? repayInfo[0] : data);
                      });
                    }
                    if(data.indexOf(',') == -1){
                      this.$nextTick(() => {
                          JsBarcode('#repayCodeImg', data);
                      });
                      this.showRepayCode = false;
                    }
                }
                // qr只展示二维码
                if (this.form.channelCode == 60) {
                  this.showRepayCode = false;
                  this.showRepayCodeImg = true
                  this.repayCodeImg = data
                  // this.$nextTick(() => {
                  //     JsBarcode('#repayCodeImg', data);
                  // });
                }
                this.showCharge = true;
                this.innerVisible = true
            }
        });
      },
      submint(formName){
        //   this.dialogVisible = false;
          this.$refs[formName].validate((valid) => {
          if (valid) {
              this.form.orderId = this.orderid;
              this.createMixRepayCharge(this.form)
          } else {
            return false;
          }
        });
      },
    }
  };
</script>

<style>
  .title{
    padding: 20px 0;
  }
  .qr {
    width: 300px;
  }
</style>